<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function load(){
				let c = document.getElementById('myC');
				let ctx = c.getContext('2d');

				let txt = '王老师很帅！';

				ctx.font = 'italic 35px 黑体';

				ctx.fillStyle = '#F00';
				ctx.fillText(txt, 30, 60);

				// left缺省
				// 可选项：right，center，start，end
				//ctx.textAlign = 'center';

				// alphabetic缺省
				// 可选项：top，middle，bottom
				//ctx.textBaseline = 'top';

				ctx.strokeStyle = '#0F0';

				let width = ctx.measureText(txt).width /3;
				console.log(width);

				ctx.strokeText(txt, 200 - width, 110);

			}

			window.onload = function(){
				load();
			}

		</script>
	</head>
	<body>
		<canvas id="myC" style="border: 1px #000 solid;" width="800" height="450">
			你的浏览器不支持canvas元素！
		</canvas>
	<div><script language="javascript">

	</script></div></body>
</html>
